<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript(2)</title>
<style type="text/css">
#p1{
	height:30px;
	width:120px;
	border:2px solid red;
	line-height:30px;
	text-align:center;
	color:blue;
}
#p2{
	height:30px;
	width:120px;
	border:2px solid red;
	line-height:30px;
	text-align:center;
}
.cg{
	color:green;
}
.cx{
	color:red;
}
.send{
	color:blue;
}

#lbt{
	width:256px;
	height:256px;
	border:2px solid red;
}
#p7{
	color:blue;
	font-family:"楷体";
}
.show{
	display:block;
}
.hidden{
	display:none;
}

#submit{
	background-color:blue;
	color:#fff;
}

</style>
<script type="text/javascript">
	function fun1(){
		window.alert("你好！");
	}
	function fun2(){
		var flag = window.confirm("how are you?");
		console.log(flag);
	}
	function fun3(){
		var str = window.prompt("请输入内容:");
		console.log(str);
	}
	function fun4(){
		var num=5;
		var id=setInterval(function(){
			console.log(num--);
			if(!num){
				clearInterval(id);
			}
		},1000)
	}
	
	var id1;
	function fun5(){
		if(!id1){
			id1 = setInterval(function(){
				p1.innerHTML = new Date().toLocaleTimeString();
			},1000)
		}
	}
	function fun6(){
		if(id1){
			clearInterval(id1);
		}
		id1=null;
	}
	function fun7(){
		p1.innerHTML ="";
		clearInterval(id1);
		id1=null;
	}
	
	var id2;
	function fun8(){
		if(!id2){
			p2.className="send";
			p2.innerHTML="发送中......";
			p2.className = null;
			id2 = setTimeout(function(){
				p2.className="cg";
				p2.innerHTML="发送成功！";
				id2=null;
			},3000);
			
		}
	}
	function fun9(){
		if(id2){
			clearTimeout(id2);
			p2.className="cx";
			p2.innerHTML="已撤销！";
			id2=null;
		}
	}
	
	function fun10(){
		var flag=window.confirm("你确定离开本页面吗？");
		
		if(flag){
			location.href = "http://www.tmooc.cn/web/index_new.html?tedu";
			location.reload();//重新加载，刷新
			history.forward();//前进
			console.log(screen.width);
			console.log(screen.height);
			console.log(screen.availWidth);
			console.log(screen.availHeight);
			console.log(navigator.userAgent);
		}
	}
	
	
	var lbtid;/*轮播图使用的全局变量*/
	var index = 0;
	var OImgs;
	window.onload=function(){/*页面加载事件，页面加载完成就激活*/
		document.getElementById("p3").innerHTML="<u>读写</u>节点";
		document.getElementsByTagName("p")[6].innerText="<u>查询</u>节点";
		console.log(document.getElementById("p5"));
		console.log(document.getElementById("p5").nodeName);/*节点标签*/
		console.log(document.getElementById("p5").nodeType);/*节点类型名称*/
		
		var oImg = document.getElementsByTagName("img")[0];
		oImg.setAttribute("src","../img/20.png");/*1.通过方法修改属性*/
		console.log(oImg.getAttribute("src"));
		
		var oP6= document.getElementsByTagName("p")[5];
		oP6.style.fontSize="30px";/*2.通过标准的属性名读写属性 className,id,style*/
		console.log(oP6.style.color);
		
		//3.通过不标准属性名读写,使用方法去解决,不建议用
		// a.href img.src
		console.log(oImg.src);
		
		
		//迷彩小兵轮播图
		var oLbt = document.getElementById("lbt");
		var reg = /num/g;
		var str1 = "<img src='../img/0num.png' title='迷彩小兵0num'>";
		var str2 = "<img src='../img/num.png' title='迷彩小兵num'>";
		var str;
		for(var i=1;i<=22;i++){
			if(i<=9){
				str = str1.replace(reg,i);
			}else{
				str = str2.replace(reg,i);
			}
			oLbt.innerHTML += str;
		}
		
		oImgs = oLbt.getElementsByTagName("img");
		oImgs[0].className = "show";
		for(var i=1;i<oImgs.length;i++){
		 	oImgs[i].className = "hidden"; 
		}
		
		go();
		
		
	}
	
	//毫秒数
	var ms = 0;
	//记次的次数
	var n = 0;
	
	//启动秒表
	var jsqid;
	function start() {
		if(jsqid) {
			return;
		}
		jsqid = setInterval(function(){
			//毫秒累加
			ms += 10;
			//换算出分、秒、毫秒
			var minute = parseInt(ms/1000/60);
			var second = parseInt(ms/1000%60);
			var milli = parseInt(ms%1000/10);
			//分别写入对应的span
			var span1 = document.getElementById("minute");
			var span2 = document.getElementById("second");
			var span3 = document.getElementById("milli");
			span1.innerHTML = prepend(minute);
			span2.innerHTML = prepend(second);
			span3.innerHTML = prepend(milli);
		},10);
	}
	//填0占位
	function prepend(m) {
		return m.toString().length==1?"0"+m:m;
	}
	//暂停秒表
	function stop() {
		if(jsqid) {
			clearInterval(jsqid);
			jsqid = null;
		}
	}
	//复位秒表
	function reset() {
		if(jsqid) {
			return;
		}
		var span1 = document.getElementById("minute");
		var span2 = document.getElementById("second");
		var span3 = document.getElementById("milli");
		span1.innerHTML = "00";
		span2.innerHTML = "00";
		span3.innerHTML = "00";
		ms = 0;
		n = 0;
	}
	//记录次数
	function record() {
		if(jsqid) {
			//次数累加
			n++;
			//获取span中分、秒、毫秒
			var span1 = document.getElementById("minute");
			var span2 = document.getElementById("second");
			var span3 = document.getElementById("milli");
			//将上述信息记录到p内
			var p = document.getElementById("record");
			p.innerHTML += 
				"记次:" + n + " " +
				span1.innerHTML + ":" +
				span2.innerHTML + "." +
				span3.innerHTML + "<br>";
		}
	}
	
	function go(){
		lbtid = setInterval(function(){
			oImgs[index%(oImgs.length)].className="hidden";
			oImgs[++index%(oImgs.length)].className="show";
		},1000)
		
	}
	function stop(){
		clearInterval(lbtid);
	}
	
	function fun11(){
		var gz = document.getElementById("gz");//1.通过id查询
		console.log(gz.parentNode);//2.查询父节点
		var oUL=document.getElementsByTagName("ul")[0];
		console.log(oUL.childNodes);//3.查询子节点 此方法返回的子节点不仅仅只有li，还有文本等
		console.log(oUL.getElementsByTagName("li")); //锁定所有li子节点,包括孙子。。
		
		//4.通过gz得到jms,查询兄弟节点
		console.log(gz.parentNode.getElementsByTagName("li")[4]);
		
		//5.单选复选中通过name属性来查询节点：
		console.log(document.getElementsByName("gender"));
	}
	
	function fun12(){//创建节点 设置属性 并挂到树上
		var newNode = document.createElement("input");
		newNode.setAttribute("type","text");
		newNode.setAttribute("value","NewNode");
		newNode.style.color="red";
		
		var oOL = document.getElementsByTagName("ol")[0];
		oOL.appendChild(newNode);
	}
	function fun13(){
		var oLi = document.createElement("li");
		oLi.innerHTML = "成都";
		var oUL = document.getElementsByTagName("ul")[0];
		oUL.appendChild(oLi);
		
	}
	function fun14(){
		var oLi = document.createElement("li");
		oLi.innerHTML = "重庆";
		
		var oUL = document.getElementsByTagName("ul")[0];
		var gz = document.getElementById("gz");
		oUL.insertBefore(oLi,gz);
	}
	function fun15(){
		var oUL = document.getElementsByTagName("ul")[0];
		var gz = document.getElementById("sz");
		
		oUL.removeChild(gz);
	}
	function fun16(){
		var oUL = document.getElementsByTagName("ul")[0];
		var oChild = oUL.getElementsByTagName("li");
		
		console.log(oChild.length);
		oUL.removeChild(oChild[oChild.length-1]);/*当末尾不是li时会报错 li孙子在最后时也会因删不掉而报错*/
	}
	
	var cities = [[],
		 ["石家庄","保定","张家口"],
         ["济南","德州","青岛","蓬莱"],
         ["南京","常州","无锡","张家港"],
         ["成都","广安","自贡","绵阳","达州"]
	];

	function change() {
		var index = document.getElementById("province").value;
		var oCity = document.getElementById("city");
		oCity.innerHTML = "<option value='0'>请选择</option>";
		for (var i = 0; i < cities[index].length; i++) {
			var oOP = document.createElement("option");
			oOP.setAttribute("value", i + 1);
			oOP.innerHTML = cities[index][i];
			oCity.appendChild(oOP);
		}

	}
</script>
</head>
<body>
	<h1>三、javaScript外部对象:</h1>
	<h2>1.window对象(BOM)常用的函数</h2>
	<input type="button" value="弹出框" onclick="fun1();">
	<input type="button" value="确认框" onclick="fun2();">
	<input type="button" value="输入框" onclick="fun3();">
	<input type="button" value="周期性定时器" onclick="fun4();">
	
	<h3>*小案例</h3>
	<h3>(1)简易电子钟</h3>
	<p id="p1"></p>
	<input type="button" value="开始" onclick="fun5();"><input type="button" value="暂停" onclick="fun6();">
	<input type="button" value="关闭" onclick="fun7();">
	
	<h3>(2)模拟发送撤销</h3>
	<p id="p2"></p>
	<input type="button" value="发送" onclick="fun8();"><input type="button" value="撤销" onclick="fun9();">

	<h2>2.window对象(BOM)常用的属性</h2>
	<input type="button" value="laction跳转" onclick="fun10();">
	<h3>*小案例：计时秒表</h3>
	<div>
	<p>
		<input type="button" value="启动"
			onclick="start();"/>
		<input type="button" value="暂停"
			onclick="stop();"/>
		<input type="button" value="复位"
			onclick="reset();"/>
		<input type="button" value="记次"
			onclick="record();"/>
	</p>
	<p>
		<span id="minute">00</span>:<span id="second">00</span>.<span id="milli">00</span>
	</p>
	<p id="record"></p>
	
	</div>

	<h2>3.DOM的操作</h2>
		
	<h3>（1）document读写节点内容</h3>
	<p id="p3"><b>读写</b>节点</p><p id="p4"><b>查询</b>节点</p><p id="p5"><b>增删</b>节点</p>
	
	<h3>(2)读取节点属性</h3>
	<img src="../img/12.png">
	<p id="p6" style="color:red">注意查看浏览器控制台的输出</p>
	
	<h3>*小案例：假循环轮播的迷彩小兵</h3>
	<div id="lbt" onmouseover="stop();" onmouseout="go();">
	</div>
	<p id="p7">1s自动循环轮播，鼠标入框暂停，离开继续</p>
	
	<h3>(3)节点查询</h3>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
			<ol>
			<li>0.0</li>
			<li>1.1</li>
			</ol>
		<li id="sz">深圳</li>
		<li>佳木斯儿</li>
		<li>葫芦岛</li>
	</ul>
	<div>
		<input type="radio" name="gender">男
		<input type="radio" name="gender">女
	</div>
	<input type="button" value="查询节点" onclick="fun11();">
	<h3>(4)创建节点，增删节点</h3>
	<input type="button" value="创建节点" onclick="fun12();">
	<input type="button" value="追加节点" onclick="fun13();">
	<input type="button" value="插入节点" onclick="fun14();">
	<input type="button" value="删除节点" onclick="fun15();">
	<input type="button" value="删尾节点" onclick="fun16();">
	
	<h3>*小案例：二级联动菜单</h3>
	<form action="www.baidu.com" method="get">
	<div>
	<h4>请选择地址：</h4>
	省份：
	<select name="province" onchange="change();" id="province">
		<option selected="selected" value="0">请选择</option>
		<option value="1">河北省</option>
		<option value="2">山东省</option>
		<option value="3">江苏省</option>
		<option value="4">四川省</option>
	</select>
	市区：
	<select name="city" id="city">
		<option selected="selected">请选择</option>
	</select>
	</div>
	<input type="submit" value="提交" id="submit">
	</form>
</body>
</html>